<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
    </div>
    <script>
        /** 
         typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，
         但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。
         但是可以使用 Object.prototype.toString 实现。
         */
        // function typeOf(obj) {
        //     return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
        // }
        // console.log(typeOf([]))  // =>array
        // console.log(typeOf({})) // =>object
        // console.log(typeOf(new Date))   // =>date
        // console.log(typeOf("sdfgsdgdfg"))   // =>string
        // console.log(typeOf(1))  // =>number
        // console.log(typeOf(false))  // =>boolean
        // console.log(typeOf(function(){}))   // =>function
        // console.log(typeOf(undefined))  // =>undefined
        // console.log(typeOf(null))   // =>null
        // function Animal() {
        //     this.colors = ['black', 'white']
        // }
        // Animal.prototype.getColor = function() {
        //     return this.colors
        // }
        // let o = new Animal()
        // console.log(o)
        // function Dog() {}
        // // Dog.prototype =  new Animal()
        // Dog.prototype =  o
        // let dog1 = new Dog()
        // dog1.colors.push('brown')
        // let dog2 = new Dog()
        // console.log(dog2.colors)  // ['black', 'white', 'brown']
        let imgList = [...document.querySelectorAll('img')]
        let length = imgList.length

    const imgLazyLoad = (function() {
        let count = 0
        console.log(count)
        // 修正错误，需要加上自执行
        return function() {
                let deleteIndexList = []
                imgList.forEach((img, index) => {
                    let rect = img.getBoundingClientRect()
                    if (rect.top < window.innerHeight) {
                        img.src = img.dataset.src
                        deleteIndexList.push(index)
                        count++
                        if (count === length) {
                            document.removeEventListener('scroll', imgLazyLoad)
                        }
                    }
                })
                imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
        }

    })()

    // 这里最好加上防抖处理
    document.addEventListener('scroll', imgLazyLoad)

    </script>
</body>
</html>
